<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VBox实例</title>
<link rel="stylesheet" type="text/css"
	href="../../resources/css/ext-all.css">
<script type="text/javascript" src="../../js/common/bootstrap.js"></script>
<script type="text/javascript" src="../../js/common/ext-lang-zh_CN.js"></script>
<style type="text/css">
html, body {
	font: normal 12px verdana;
	margin: 0;
	padding: 0;
	border: 0 none;
}
</style>
<script type="text/javascript">
	//参数与hbox类似，不赘述
	Ext
	.onReady(function() {
		var currentName;
		var replace = function(config, name) {
			var btns = Ext.getCmp('btns');
			if (name && name != currentName) {
				currentName = name;
				btns.remove(0);
				btns.add(Ext.apply(config));
			}
		};
		var viewport = Ext
		.create('Ext.Viewport', {
			layout : 'border',
			items : [
				{
					id : 'btns',
					region : 'west',
					baseCls : 'x-plain',
					split : true,
					width : 150,
					minWidth : 100,
					maxWidth : 250,
					layout : 'fit',
					margins : '5 0 5 5',
					items : {
						baseCls : 'x-plain',
						html : '<p style="padding:10px;color:#556677;font-size:11px;">点击右边的按钮查看效果</p>' } },
				{
					region : 'center',
					margins : '5 5 5 0',
					layout : 'anchor',
					items : [
						{
							anchor : '100%',
							baseCls : 'x-plain',
							layout : { type : 'hbox', padding : 10 },
							defaults : {
								margins : '0 5 0 0',
								pressed : false,
								toggleGroup : 'btns',
								allowDepress : false },
							items : [
								{
									xtype : 'button',
									text : 'Spaced / Align: left',
									handler : function() {
										replace({
											layout : { type : 'vbox', padding : '5', align : 'left' },
											defaults : { margins : '0 0 5 0' },
											items : [
												{ xtype : 'button', text : 'Button 1' },
												{ xtype : 'tbspacer', flex : 1 },
												{ xtype : 'button', text : 'Button 2' },
												{ xtype : 'button', text : 'Button 3' },
												{ xtype : 'button', text : 'Button 4', margins : '0' }
											] }, 'spaced');
									} },
								{
									xtype : 'button',
									text : 'Multi-Spaced / Align: left',
									handler : function() {
										replace({
											layout : { type : 'vbox', padding : '5', align : 'left' },
											defaults : { margins : '0 0 5 0' },
											items : [
												{ xtype : 'button', text : 'Button 1' },
												{ xtype : 'tbspacer', flex : 1 },
												{ xtype : 'button', text : 'Button 2' },
												{ xtype : 'tbspacer', flex : 1 },
												{ xtype : 'button', text : 'Button 3' },
												{ xtype : 'tbspacer', flex : 1 },
												{ xtype : 'button', text : 'Button 4', margins : '0' }
											] }, 'multi spaced - align left');
									} },
								{
									xtype : 'button',
									text : 'Align: left',
									handler : function() {
										replace({
											layout : { type : 'vbox', padding : '5', align : 'left' },
											defaults : { margins : '0 0 5 0' },
											items : [
												{ xtype : 'button', text : 'Button 1' },
												{ xtype : 'button', text : 'Button 2' },
												{ xtype : 'button', text : 'Button 3' },
												{ xtype : 'button', text : 'Button 4' }
											] }, 'align left');
									} },
								{
									xtype : 'button',
									text : 'Align: center',
									handler : function() {
										replace({
											layout : { type : 'vbox', padding : '5', align : 'center' },
											defaults : { margins : '0 0 5 0' },
											items : [
												{ xtype : 'button', text : 'Button 1' },
												{ xtype : 'button', text : 'Button 2' },
												{ xtype : 'button', text : 'Button 3' },
												{ xtype : 'button', text : 'Button 4' }
											] }, 'align center');
									} },
								{
									xtype : 'button',
									text : 'Align: stretch',
									handler : function() {
										replace({
											layout : {
												type : 'vbox',
												padding : '5',
												align : 'stretch' },
											defaults : { margins : '0 0 5 0' },
											items : [
												{ xtype : 'button', text : 'Button 1' },
												{ xtype : 'button', text : 'Button 2' },
												{ xtype : 'button', text : 'Button 3' },
												{ xtype : 'button', text : 'Button 4' }
											] }, 'align stretch');
									} },
								{
									xtype : 'button',
									text : 'Align: stretchmax',
									handler : function() {
										replace({
											layout : {
												type : 'vbox',
												padding : '5',
												align : 'stretchmax' },
											defaults : { margins : '0 0 5 0' },
											items : [
												{ xtype : 'button', text : 'Jamie' },
												{ xtype : 'button', text : 'Aaron' },
												{ xtype : 'button', text : 'Tommy' },
												{ xtype : 'button', text : 'Ed ' }
											] }, 'align stretchmax');
									} }
							] },
						{
							anchor : '100%',
							baseCls : 'x-plain',
							layout : { type : 'hbox', padding : '0 10 10' },
							defaults : {
								margins : '0 5 0 0',
								pressed : false,
								toggleGroup : 'btns',
								allowDepress : false },
							items : [
								{
									xtype : 'button',
									text : 'Flex: Even / Align: center',
									handler : function() {
										replace({
											layout : { type : 'vbox', padding : '5', align : 'center' },
											defaults : { margins : '0 0 5 0' },
											items : [
												{ xtype : 'button', text : 'Button 1', flex : 1 },
												{ xtype : 'button', text : 'Button 2', flex : 1 },
												{ xtype : 'button', text : 'Button 3', flex : 1 },
												{
													xtype : 'button',
													text : 'Button 4',
													flex : 1,
													margins : '0' }
											] }, 'align flex even');
									} },
								{
									xtype : 'button',
									text : 'Flex: Ratio / Align: center',
									handler : function() {
										replace({
											layout : { type : 'vbox', padding : '5', align : 'center' },
											defaults : { margins : '0 0 5 0' },
											items : [
												{ xtype : 'button', text : 'Button 1', flex : 1 },
												{ xtype : 'button', text : 'Button 2', flex : 1 },
												{ xtype : 'button', text : 'Button 3', flex : 1 },
												{
													xtype : 'button',
													text : 'Button 4',
													flex : 3,
													margins : '0' }
											] }, 'align flex ratio');
									} },
								{
									xtype : 'button',
									text : 'Flex + Stretch',
									handler : function() {
										replace({
											layout : {
												type : 'vbox',
												padding : '5',
												align : 'stretch' },
											defaults : { margins : '0 0 5 0' },
											items : [
												{ xtype : 'button', text : 'Button 1', flex : 1 },
												{ xtype : 'button', text : 'Button 2', flex : 1 },
												{ xtype : 'button', text : 'Button 3', flex : 1 },
												{
													xtype : 'button',
													text : 'Button 4',
													flex : 3,
													margins : '0' }
											] }, 'align flex + stretch');
									} },
								{
									xtype : 'button',
									text : 'Pack: start / Align: center',
									handler : function() {
										replace({
											layout : {
												type : 'vbox',
												padding : '5',
												pack : 'start',
												align : 'center' },
											defaults : { margins : '0 0 5 0' },
											items : [
												{ xtype : 'button', text : 'Button 1' },
												{ xtype : 'button', text : 'Button 2' },
												{ xtype : 'button', text : 'Button 3' },
												{ xtype : 'button', text : 'Button 4' }
											] }, 'align pack start + align center');
									} },
								{
									xtype : 'button',
									text : 'Pack: center / Align: center',
									handler : function() {
										replace({
											layout : {
												type : 'vbox',
												padding : '5',
												pack : 'center',
												align : 'center' },
											defaults : { margins : '0 0 5 0' },
											items : [
												{ xtype : 'button', text : 'Button 1' },
												{ xtype : 'button', text : 'Button 2' },
												{ xtype : 'button', text : 'Button 3' },
												{ xtype : 'button', text : 'Button 4', margins : '0' }
											] }, 'align pack center + align center');
									} },
								{
									xtype : 'button',
									text : 'Pack: end / Align: center',
									handler : function() {
										replace({
											layout : {
												type : 'vbox',
												padding : '5',
												pack : 'end',
												align : 'center' },
											defaults : { margins : '0 0 5 0' },
											items : [
												{ xtype : 'button', text : 'Button 1' },
												{ xtype : 'button', text : 'Button 2' },
												{ xtype : 'button', text : 'Button 3' },
												{ xtype : 'button', text : 'Button 4', margins : '0' }
											] }, 'align pack end + align center');
									} }
							] }
					] }
			] });
	});
</script>
</head>
<body>

</body>
</html>